<template>
  <div id="app">
    <el-form :inline="true" :model="state.queryData" class="demo-form-inline">
				<el-form-item>
					<el-input size="small" clearable v-model="state.queryData.deviceName" placeholder="设备名称"/>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="handleFilter()">查 询</el-button>
          <el-button size="small" type="success" @click="addDevice()">新 增</el-button>
          <el-button size="small" type="primary" @click="codec()">codec</el-button>
				</el-form-item>
			</el-form>
    <el-table :data="state.tableData.rows" style="width: 100%" :cell-style="cellStyle"
      :header-cell-style="headerCellStyle">
      <el-table-column type="index" width="50" >
        <template #default="scope">{{ scope.row.deviceId }}</template>
      </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip>
        <template #default="scope">
          <el-button v-waves type="text" @click="handleConfigOperation(scope.row)">{{ scope.row.deviceName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="deviceName" label="SN" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.sn }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="handleConfigOperation(scope.row)">配置</el-button>
          <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 15px">
      <el-pagination :current-page="state.tableData.pagination.pageNum" :pager-count="5" :page-sizes="[10, 20, 50, 100]"
        :page-size="state.tableData.pagination.pageSize" :page-count="state.tableData.pagination.totalPage" background
        layout="sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <!-- drawer 修改 -->
    <el-drawer title="修改" :before-close="handleClose" v-model="state.showConfigDrawer" ref="drawer"
      :close-on-press-escape="true">
      <el-form :model="state.device">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input clearable v-model="state.device.deviceName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="handleEdit()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- drawer 新增 -->
    <el-drawer title="新增" :before-close="handleClose" v-model="state.addDrawer" ref="drawer"
               :close-on-press-escape="true">
      <el-form :model="state.device">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input clearable v-model="state.device.deviceName"></el-input>
        </el-form-item>
        <el-form-item label="设备序列号" prop="sn">
          <el-input clearable v-model="state.device.sn"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="addEdit()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog title="codec" v-model="state.codecDialog">
      <el-form :model="state.codecForm" label-width="100px">
        <el-form-item label="设备类型" prop="type">
          <el-select
              v-model="state.codecForm.type"
              placeholder="选择设备类型"
              size="large"
              style="width: 240px"
          >
            <el-option
                v-for="item in state.selectCodecOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="秒量" prop="seconds">
          <el-input-number step="100" max="10000" clearable v-model="state.codecForm.seconds"></el-input-number>
        </el-form-item>
        <el-form-item label="f-port" prop="fPort">
          <el-input clearable v-model="state.codecResult.fPort"></el-input>
        </el-form-item>
        <el-form-item label="payload" prop="result">
          <el-input clearable v-model="state.codecResult.payload"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmCodec()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { reactive, onMounted } from 'vue';
import { getDeviceListApi, updateDeviceByIdApi } from '/@/api/device/index'
import {addDeviceApi, codecApi, deleteDeviceApi} from "../../api/device";
const state = reactive({
  showConfigDrawer: false,
  activeTab: "first",
  queryData: {
  },
  tableData: {
    pagination: {
      pageNum: 1,
      pageSize: 10,
      totalPage: 50,
    },
    rows: [],
  },
  device: {},
  addDrawer:false,
  codecDialog:false,
  codecForm:{
    type:'',
    seconds:0,
  },
  selectCodecOptions:[
    {value:'mingkong',label:'mingkong'},
    {value:'wotian',label:'wotian'},
  ],
  codecResult:{
    fPort:'',
    payload:'',
  },
});

onMounted(() => {
  getTableData()
});

// 分页
function handleSizeChange(val) {
  state.tableData.pagination.pageSize = val
  getTableData()
}
function handleCurrentChange(val) {
  state.tableData.pagination.pageNum = val
  getTableData()
}
// 搜索
function handleFilter() {
  state.tableData.pagination.pageNum = 1
  getTableData()
}
function addDevice(){
  state.addDrawer=true
}
function codec(){
  state.codecDialog=true
}
function confirmCodec(){
  codecApi(state.codecForm)
      .then((res) => {
        if (res && res.code === 200) {
          ElMessage.success('成功')
          state.codecResult=res
          console.log(state.codecResult)
        } else {
          ElMessage.error('失败')
        }
      })
      .catch((err) => {
        console.log(err)
      })
}
function addEdit(){
  console.log(state.device)
  addDeviceApi({
    deviceName:state.device.deviceName,
    sn:state.device.sn
  })
      .then((res) => {
        if (res && res.code === 200) {
          ElMessage.success(res.message)
          state.addDrawer=false
          getTableData()
        } else {
          ElMessage.error(res.code + ': ' + res.message)
        }
      })
      .catch((err) => {
        console.log(err)
      })
}
// 列表
function getTableData() {
  getDeviceListApi({
    name: state.queryData.deviceName,
    pageNum: state.tableData.pagination.pageNum,
    pageSize: state.tableData.pagination.pageSize
  })
    .then((res) => {
      if (res && res.code === 200) {
        state.tableData.rows = res.items
      } else {
        ElMessage.error(res.code + ': ' + res.message)
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
// 新增
function handleEdit() {
  updateDeviceByIdApi({
    id: state.device.deviceId,
    name: state.device.deviceName
  }).then(res => {
    if (res && res.code == 200) {
      ElMessage.success('修改成功');
      handleClose()
    } else {
      ElMessage.success('修改失败');
    }
  }).catch(err => {
    ElMessage.success('网络错误，修改失败');
  })
}
// 打开drawer配置
function handleConfigOperation(row) {
  state.showConfigDrawer = true
  state.device = row
}
function deleteRow(row){
  console.log(row)
  deleteDeviceApi({
    id: row.deviceId,
  }).then(res => {
    if (res && res.code === 200) {
      ElMessage.success('删除成功');
      getTableData()
    } else {
      ElMessage.success('修改失败');
    }
  }).catch(err => {
    ElMessage.success('网络错误，修改失败');
  })
}
// 关闭drawer
function handleClose() {
  state.showConfigDrawer = false;
  state.addDrawer=false
  state.device = {}
  getTableData();
}

// 表格样式
function cellStyle() {
  return "padding:3px;"
}
function headerCellStyle() {
  return "padding:3px;"
}
</script>

<style lang="scss" scoped>
#app {
  .buttonclass {
    padding: 10px;
    text-align: right;
  }

  .subButton {
    width: 60%;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>